<template>
	<view>
		<view class="wrap-container">
			<!-- <view class="warp-input" v-for="(item,index) in inputData"> -->
			<view class="warp-input">
				<view class="warp-text">设备名称:</view>
				<u-input v-model="equipment_name" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备编号:</view>
				<u-input v-model="equip_id" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备型号:</view>
				<u-input v-model="equipment_typecode" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装日期:</view>
				<u-input v-model="usetime" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">安装位置:</view>
				<u-input v-model="useplace" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">设备坐标:</view>
				<u-input v-model="coordinate" :type="type" :border="border" :height="height"
					@click="navMap(coordinate,equipment_name)" />
			</view>
			<view class="warp-input">
				<view class="warp-text">电耗:</view>
				<u-input v-model="energy_waste" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">状态:</view>
				<u-input v-model="status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>
			<view class="warp-input">
				<view class="warp-text">网络状态:</view>
				<u-input v-model="network_status" :type="type" :border="border" :height="height" :disabled="true" />
			</view>

		</view>

		<!-- 	<view class="charts-box" >
		<lineCharts :listObj="this.chartData">
		</lineCharts>

		</view> -->

		<view class="charts-box" v-for="(tag, index) in tags" :key="index" :class="`chart-box-${index}`">
			<transition-group :name="`chart-transition-${index}`">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData[tag.id]" :key="index" />
			</transition-group>
		</view>
		
	</view>
</template>
<script>
	// import lineCharts from '@/components/lineCharts/lineCharts.vue'
	export default {
		// components: {
		// 	lineCharts
		// },
		data() {
			return {
				id: "",
				type: 'text',
				height: 60,
				border: true,
				equipment_name: "",
				equip_id: "",
				equipment_typecode: "",
				usetime: "",
				useplace: "",
				status: "",
				energy_waste: "",
				network_status: "",
				coordinate: "",
				ntervalId: null, // 定时器的 ID
				refreshCount: 0, // 计数器，记录当前已经请求的次数
				tags: [],
				count: 5,
				// inputData: [{
				// 		title: "设备名称",
				// 		value: "666"
				// 	}, {
				// 		title: "设备编号",
				// 		value: "666"
				// 	}, {
				// 		title: "设备型号",
				// 		value: "666"
				// 	}, {
				// 		title: "安装日期",
				// 		value: "666"
				// 	}, {
				// 		title: "安装位置",
				// 		value: "666"
				// 	}, {
				// 		title: "状态",
				// 		value: "666"
				// 	},
				// 	{
				// 		title: "网络状态",
				// 		value: "666"
				// 	}
				// ],
				series: [],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// data: [{
						// 	min: 0,
						// 	max: 150
						// }]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				}
			}
		},
		// onShow() {
		//     uni.showLoading();
		// },
		
		onLoad(e) {
			console.log('页面显示');
			this.id = e.id
			this.getEqView();
			this.startRefreshing(); // 在组件创建时开始定时刷新
		},
		beforeDestroy() {
			this.stopRefreshing(); // 在组件销毁前停止定时刷新
		},
		onHide() {
		    console.log('页面隐藏');
		  this.stopRefreshing();
		},
		onUnload() {
			console.log('页面隐藏');
			this.stopRefreshing();
		},
		methods: {
			getEqView() {
				this.$u.api.eqView({
					"algorithmProcessId": "getEqview",
					"param": {
						"data": {
							id: this.id
						}
					}
				}).then(Response => {
					const res = Response.data.data.result[0]
					this.equipment_name = res.equipment_name
					this.equip_id = res.equip_id
					this.equipment_typecode = res.equipment_typecode
					this.usetime = res.usetime
					let coordinateArr = res.coordinate.split(",")
					this.coordinate = coordinateArr[0] + "," + coordinateArr[1]
					

					this.useplace = res.useplace
					if (res.status) {
						let statusMap = {
							'1': '异常',
							'2': '运行',
							'3': '停止',
							'4': '维修维护'
						};
						this.status = statusMap[res.status]
					}
					if (res.network_status) {
						let netMap = {
							'1': '运行',
							'0': '在线',
						};
						this.network_status = netMap[res.network_status]
					}
					
					this.refreshData();
				})
				
			},

			startRefreshing() {
				const interval = 6000; // 1秒等于1000毫秒
				// 设置定时器，每隔1秒执行一次refreshData方法
				this.intervalId = setInterval(() => {
					this.refreshData();
				}, interval);
			},
			stopRefreshing() {
				clearInterval(this.intervalId); // 停止定时器
			},
			refreshData() {
				this.$u.api.monitor({
					"algorithmProcessId": "getAppMonitor",
					"param": {
						"data": {
							structure_uuid: this.equip_id
						}
					}
				}).then(response => {
					this.tags = response.data.data.result.tags;
					this.generateChartData();


				}).catch(error => {
					// 处理错误情况
					console.error(error);
				});


			},
			valuesByIndex(id) {
				return this[`values${id}`] || (this[`values${id}`] = []);
			},
			timesListByIndex(id) {
				return this[`timesList${id}`] || (this[`timesList${id}`] = []);
			},
			generateChartData() {
				this.tags.forEach((tag, index) => {
					const valuesList = this.valuesByIndex(tag.id);
					const timesList = this.timesListByIndex(tag.id);

					const values = tag.value;
					const tagDescribe = tag.tagDescribe;
					const times = tag.times;
					const timePart = times.substring(11, 19);

					valuesList.push(values);
					timesList.push(timePart);
					if (valuesList.length > 5) {
						valuesList.shift();
					}
					if (timesList.length > 5) {
						timesList.shift();
					}

					const dataSeries = {
						name: tagDescribe,
						data: [...valuesList],
					};

					const chartData = {
						categories: timesList,
						series: [dataSeries],
					};
					this.$set(this.chartData, tag.id, chartData);
				});
			},
			// 	getServerData(timesList) {
			// 		//模拟从服务器获取数据时的延时
			// 		setTimeout(() => {
			// 				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// 				let res = {
			// 					categories: timesList,
			// 					series: this.series
			// 			}; 
			// 			this.chartData = JSON.parse(JSON.stringify(res));
			// 		}, 500);
			// },
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},

			navMap(coordinate, equipment_name) {
				uni.navigateTo({
					url: "/pages/sys/workbench/install?coordinate=" + coordinate + "&equipment_name=" +
						equipment_name
				});

			},

		}
	}
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
		padding: 34rpx 0 0 34rpx;
	}


	.wrap-container {
		width: 93%;
		height: 880rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-top: 12rpx;
		margin-bottom: 48rpx;


		.warp-input {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 24rpx 0;

			.warp-text {
				width: 30%;
				text-align: right;
				padding-right: 24rpx;
			}
		}
	}


	.charts-box {
		width: 93%;
		height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 0;
		margin-bottom: 48rpx;
	}

	.chart-transition-1-enter-active,
	.chart-transition-1-leave-active,
	.chart-transition-2-enter-active,
	.chart-transition-2-leave-active,
	/* 更多的动画样式... */
		{
		transition: transform 0.5s;
	}

	.chart-transition-1-enter,
	.chart-transition-1-leave-to,
	.chart-transition-2-enter,
	.chart-transition-2-leave-to,
	/* 更多的动画样式... */
		{
		transform: translateX(-100%);
	}
</style>